<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./index.css">
    <!-- 引入组件库 -->
  
    <script src="./vue.js"></script>
    <script src="./index.js"></script>
</head>

<body>
    <div id="app">
        <div id="content">
            <ul> 
                <input type="checkbox" v-model="isChecked2" @click="handleCheck($event)">
                <li v-for="data in dataList" style="list-style-type:none">
                    <input type="checkbox" v-model="checkBoxGroup" :value="data"> {{data.name}} 数量{{data.number}}
                    <el-button type="primary" @click="handleReduce($event,data)" style="margin-left: 10px">增加</el-button>
                    <el-button type="primary" @click="handleAdd($event,data)" style="margin-left: 10px">减少</el-button>
                </li>
            </ul>
        </div>
        <div id="foot">计算总金额为:{{getSum()}}</div>
        {{checkBoxGroup}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isChecked:false,
                message: "测试",
                dataList: [
                    { name: '袜子', id: 1, price: 10, number: 2 },
                    { name: '裤子', id: 1, price: 10, number: 3 },
                    { name: '棉袄', id: 1, price: 10, number: 4 },
                ],
                checkBoxGroup: []
            },
            /** 计算属性 **/
            computed:{
                    isChecked2(){
                        return this.dataList.length==this.checkBoxGroup.length;
                    }
            },
            methods: {
                getSum() {
                    var sum = 0;
                    this.checkBoxGroup.forEach(item => {
                        sum += item.price * item.number;
                    });
                    return sum;
                },
             
                handleCheck(event){
                    //如果为true
                    if(event.target.checked){
                      this.checkBoxGroup=this.dataList;
                    }else{
                        this.checkBoxGroup=[];  
                    }
                   console.log(event);
                },
                handleReduce(event,data){
                      data.number++;
                 
                },
                handleAdd(event,data){
                    alert(fetch);
                    fetch("http://userid.xiaomi.com/userId?callback=userLogincallback&_=1572938299215")
                    .then(response=>{
                      console.log(response);
                      return response.json();
                    })
                    .then(response=>{
                       
                        console.log(response);
                    })
                    .catch(error=>{
                        console.log(error);
                    })
                    ;
                    if(data.number!=0){
                        data.number--;
                    }else{
                        alert("数量不能再减了宝贝!!");
                    }
                  
                }


            }

        });
    </script>

</body>

</html>